<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ViewIssue</title>
<%@include file="header.jsp"%>



<script type="text/javascript" charset="utf-8">

var commentid=0;
var editcommentid=0;

	$(document).ready(function() {
		
		
		$("#savecomment").click(function() {
			//alert("Save: " + $("#issueid").val() );
			$.ajax({
				type : "post",
				url : "../UpdateIssue?action=addcomment",
				datatype : "json",
				data : "issueid=" + $("#issueid").val()
						+ "&username=" 
						+ $("#user").val()
						+ "&comments="
						+ $("#txtcomment").val() ,
				success : function(data) {
					//window.location("viewissue.jsp?issueid="+$("#issueid").val());
					window.location.assign("viewissue.jsp?issueid="+$("#issueid").val());
										},
				error : function(jqXHR, textStatus) {
						alert("Request failed: " + textStatus);
										}
			});
		});	
		
		$("#like").click(function() {
			alert("Liked");
		});
		
		$("#edit").click(function() {
			//alert("Edit: " + $("#issueid").val() );
			window.location.assign("editissue.jsp?issueid="+$("#issueid").val());	
		});
		
		$("#confirmdeletecomment").click(function() {
			//alert("Delete");
			$.ajax({
				type : "post",
				url : "../UpdateIssue?action=deletecomment",
				datatype : "json",
				data : "commentid=" + commentid,
				success : function(data) {
					window.location.assign("viewissue.jsp?issueid="+$("#issueid").val());					
										},
				error : function(jqXHR, textStatus) {
						alert("Request failed: " + textStatus);
										}
			});
			
			$("#dlgconfirmdelete").modal("hide");
		});
		
		
	
		$("#confirmeditcomment").click(function() {

			//alert("edit: " + editcommentid);
			var editedcomment ="";
			editedcomment=$("#txtcommentedit").val().replaceAll("\n", "<br/>");
				
			$.ajax({
				type : "post",
				url : "../UpdateIssue?action=editcomment",
				datatype : "json",
				data : "commentid=" + editcommentid
						+ "&username=" 
						+ $("#user").val()
						+ "&comments="
						+ editedcomment ,
				success : function(data) {
					window.location.assign("viewissue.jsp?issueid="+$("#issueid").val())	;				
										},
				error : function(jqXHR, textStatus) {
						alert("Request failed: " + textStatus);
										}
			});
			$("#dlgeditcomment").modal("hide");
		});

	});

	
	function editcomment(id){
		editcommentid=id;
		//$("#txtcommentedit").append("TEST");
		var commentdata = $("#readcomment"+id);
		$("#txtcommentedit").html(commentdata);
	
		
		$.getJSON('../GetCommentDetails?commentid='+editcommentid , function(data) {
			var i;
			for (i = 0; i < data.comment.length; i++) {
				var commentdata = data.comment[0].comment;
				commentdata=commentdata.replaceAll("<br/>", "\n");
				
				$("#txtcommentedit").html(commentdata);
				
			}
			
		});
		$("#dlgeditcomment").modal("show");
		
		
	
		
		
		
		
	};

	function deletecomment(id){
		commentid=id;
		$("#dlgconfirmdelete").modal("show");
	};
	
	String.prototype.replaceAll = function( token, newToken, ignoreCase ) {
	    var _token;
	    var str = this + "";
	    var i = -1;

	    if ( typeof token === "string" ) {

	        if ( ignoreCase ) {

	            _token = token.toLowerCase();

	            while( (
	                i = str.toLowerCase().indexOf(
	                    token, i >= 0 ? i + newToken.length : 0
	                ) ) !== -1
	            ) {
	                str = str.substring( 0, i ) +
	                    newToken +
	                    str.substring( i + token.length );
	            }

	        } else {
	            return this.split( token ).join( newToken );
	        }

	    }
	return str;
	};

	
	
</script>


</head>
<body
	onload="ViewPageInit(<%=request.getParameter("issueid")%>, <%=session.getAttribute("userrole")%>)">


	<%@include file="toppanel.jsp"%>


	<input type='hidden' id="issueid"
		value="'<%=request.getParameter("issueid")%>'" />
	<input type='hidden' id="user"
		value="'<%=session.getAttribute("user")%>'" />


	<div style="width: 90%; padding-left: 5%">
		<div>
			<br />

			<div class="viewmyissue">
				<table border="0" width="90%">
					<tr>
						<td style="padding-top: 5px; padding-left: 5px; font-size: 18px;"
							colspan="3"><span style="color: black" id="issuetitle"></span>
						</td>

					</tr>

					<tr>
						<td
							style="padding-bottom: 5px; padding-left: 5px; font-size: 12px;"
							colspan="3">by &nbsp;<span style="color: blue"
							id="createdby">Mona Chandrapal</span>&nbsp;on 05/16/2013
						</td>

					</tr>

					<tr>
					<tr>
						<td width="20%"
							style="padding-top: 5px; padding-bottom: 5px; padding-left: 5px;">Bugid:
							&nbsp;&nbsp;<span id="bugid" style="color: blue"></span>
						</td>
						<td width="40%"
							style="padding-top: 5px; padding-bottom: 5px; padding-left: 5px;">Module:
							&nbsp;&nbsp;<span id="module" style="color: blue"></span>
						</td>
						<td width="40%"
							style="padding-top: 5px; padding-bottom: 5px; padding-left: 5px;">Version:
							&nbsp;&nbsp;<span id="version" style="color: blue"></span>
						</td>
					</tr>
				</table>

				<hr>
				<div style="padding-left: 10px; padding-right: 5px;"
					id="issuedetail"></div>

			</div>

			<div
				style="background-color: #F0F0F0; padding-top: 10px; padding-bottom: 10px;">
				<%
					if (session.getAttribute("userrole").toString()
							.equalsIgnoreCase("2")) {
				%>
				<span style="margin-left: 10px; padding-top: 10px;" id="edit" ><a  style="cursor:pointer">Edit</a></span>
				<%
					}
				%>
				<span style="margin-left: 10px; padding-top: 10px;">&nbsp;</span> 
				<span
					class="pull-right" style="padding-right: 30px;">
					&nbsp;&nbsp; <img src="../images/comment.png" alt=""
					style="padding-bottom: 5px;" width="24" height="24" /> 5
				</span>
				<!-- 				 <img -->
				<!-- 					id="like" src="../images/like.png" alt="" -->
				<!-- 					style="padding-bottom: 5px;" width="24" height="24" /> 7 -->






			</div>
		</div>
		<br />

		<div id="readcomments"></div>

		<br />
		<textarea id="txtcomment" rows="3" class="input-block-level"
			placeholder="Add a Comment..."></textarea>
		<input type="button" class="btn" id="savecomment" value="save" />

	</div>




	<div></div>



	<div id="dlgconfirmdelete" class="modal hide fade"
		style="display: none;">
		<div class="modal-header">
			<a href="#" class="close" data-dismiss="modal">x</a>
			<h5>Delete comment:</h5>
		</div>
		<div class="modal-body">Are you sure you want to delete the
			comment ?</div>
		<div class="modal-footer">
			<a href="#" class="btn confirm_delete_the_item no_return"
				id="confirmdeletecomment">Ok</a> <a href="#"
				class="btn btn-secondary " data-dismiss="modal">Cancel</a>
		</div>
	</div>




	<div id="dlgeditcomment" class="modal hide fade" style="display: none;">
		<div class="modal-header">
			<a href="#" class="close" data-dismiss="modal">x</a>
			<h5>Edit Comment:</h5>
		</div>
		<div class="modal-body">
			<textarea id="txtcommentedit" rows="10" class="input-block-level"></textarea>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn confirm_delete_the_item no_return"
				id="confirmeditcomment">Save</a> <a href="#"
				class="btn btn-secondary " data-dismiss="modal">Cancel</a>
		</div>
	</div>

</body>
</html>